<template>
  <view class="container">
    <scroll-view :scroll-y="true" class="scroll-view-content">
      <!-- 轮播图 -->
      <isong-swiper :img-list="data.bannerlist"></isong-swiper>

      <!-- 登录卡片 -->
      <view v-if="!data.isLogin" class="section-wrapper login-wrapper">
        <view class="login-banner">
          <view class="login-text">
            <view class="login-title">登录即送 尊享权益</view>
            <view class="login-subtitle">MAKE A SONG</view>
          </view>
          <view class="login-btn" @click="() => toLogin()">登录/注册</view>
        </view>
      </view>
      <!-- 点击测评 -->
      <view class="music-evaluation">
        <image
          @click="handleEvaluation"
          class="music-review-img"
          src="https://cdn.xmxiaomai.com/isong_static/%E7%BC%96%E7%BB%84%2030.png"
          mode="widthFix"></image>
        <!-- 消息走马灯 -->
        <view class="notice-swiper">
          <swiper
            vertical
            autoplay
            circular
            interval="1500"
            :indicator-dots="false"
            class="notice-swiper-inner"
            height="45rpx">
            <swiper-item v-for="(item, idx) in data.usingList" :key="idx">
              <view class="notice-text">{{ item.userName }} 正在使用</view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 首页视频 -->
      <view class="section-wrapper">
        <view class="view-grid">
          <view class="view-item" v-for="item in data.videoList" :key="item.videoId">
            <video :src="item.videoUrl" :poster="item.coverUrl" controls objectFit="cover"></video>
          </view>
        </view>
      </view>

      <!-- 广告位 -->
      <view class="section-wrapper">
        <view class="song-grid">
          <view class="song-item" v-for="item in data.adList" :key="item.spaceId" @click="() => onToMusicDetail(item)">
            <view class="song-title">{{ item.musicName }}</view>
            <view class="song-artist">{{ item.memberName }}</view>
            <view class="song-img">
              <image class="song-cover" :src="item.coverUrl" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 音乐测评 -->
      <view class="musical-note-wrapper" @click="handlePayAd">
        <view class="music-review">
          <view class="music-review-btn">我要推广</view>
        </view>

        <image
          class="musical_note"
          src="https://cdn.xmxiaomai.com/isong_static/musical_note.png"
          mode="widthFix"></image>
      </view>

      <!-- ISONG榜中榜 -->
      <view class="ranking-section">
        <image class="ranking-bg" src="https://cdn.xmxiaomai.com/isong_static/%E6%A6%9C%E4%B8%AD%E6%A6%9C%E8%83%8C%E6%99%AF%20%281%29.png" mode="widthFix"></image>
        <view class="ranking-content">
          <template v-for="(item, index) in data.rankList" :key="item?.sortId">
            <view :class="['rank-item', 'rank-' + (index + 1)]" v-if="index < 6" @click="() => onToMusicDetail(item)">
              <view class="header-img">
                <image
                  v-if="index < 3"
                  class="header-img-avatar-bg"
                  :src="
                    index === 0
                      ? `https://cdn.xmxiaomai.com/isong_static/Group%2021.png`
                      : index === 1
                      ? `https://cdn.xmxiaomai.com/isong_static/Group%2022.png`
                      : `https://cdn.xmxiaomai.com/isong_static/Group%2024.png`
                  "></image>
                <image class="header-img-avatar" :src="item?.coverUrl"></image>
              </view>
              <view class="rank-name ellipsis-1">{{ item?.musicName }}</view>
              <view class="rank-artist ellipsis-1">{{ item?.memberName }}</view>
            </view>
          </template>
          <view class="more-btn" @click="handleMoreTop">更多榜单</view>
        </view>
      </view>

      <!-- 精品赏析 -->
      <view class="section-wrapper appreciation-out text-center">
        <view class="appreciation">
          <view class="appreciation-header-img">
            <image
              class="appreciation-img-bg"
              src="https://cdn.xmxiaomai.com/isong_static/Group%2019.png"
              mode="widthFix"></image>
            <image
              class="appreciation-img-title"
              src="https://cdn.xmxiaomai.com/isong_static/%E7%B2%BE%E5%93%81%E8%B5%8F%E6%9E%90.png"
              mode="widthFix"></image>
          </view>
          <view class="playlist">
            <view
              class="playlist-item"
              v-for="item in data.musicRecommend"
              :key="item.musicName"
              @click="() => onToMusicDetail(item)">
              <image :src="item.coverUrl" class="item-avatar"></image>
              <view class="item-info">
                <view class="item-title">{{ item.musicName }}</view>
                <view class="item-artist">
                  <text class="quality-tag">{{ 'SQ' }}</text>
                  {{ item.memberName }}
                </view>
              </view>
              <view class="item-actions">
                <view class="play-icon"></view>
<!--                <view class="more-dots"></view>-->
              </view>
            </view>
          </view>
          <view class="more-btn" @click="handleMoreMusic">更多歌曲</view>
        </view>
      </view>

      <!-- 音乐人推荐 -->
      <view class="musicians-section">
        <view class="appreciation-header-img">
          <image
            class="appreciation-img"
            src="https://cdn.xmxiaomai.com/isong_static/Bitmap.png"
            mode="widthFix"></image>
          <image
            class="appreciation-img-bg"
            src="https://cdn.xmxiaomai.com/isong_static/Group%2019.png"
            mode="widthFix"></image>
          <image
            class="appreciation-img-title"
            src="https://cdn.xmxiaomai.com/isong_static/%E9%9F%B3%E4%B9%90%E4%BA%BA%E6%8E%A8%E8%8D%90.png"
            mode="widthFix"></image>
        </view>
        <music-swiper :list="data.memberRecommend" @click="toMusicianDetails"></music-swiper>
      </view>

      <!-- 邀请好友 -->
      <view class="invite-banner-out">
        <image
          @click="toInvite"
          class="invite-banner"
          src="https://cdn.xmxiaomai.com/isong_static/home_recommend.png"
          mode="widthFix"></image>

        <image
            @click="toNews"
            class="news-banner"
            src="https://cdn.xmxiaomai.com/isong_static/home_news.png"
            mode="widthFix"></image>
      </view>

      <!-- 电子器乐 -->
      <!-- <view class="product-grid-out text-center">
        <view class="appreciation-header-img">
          <image
            class="appreciation-img-bg"
            src="https://cdn.xmxiaomai.com/isong_static/Group%2019.png"
            mode="widthFix"></image>
          <image
            class="appreciation-img-title"
            src="https://cdn.xmxiaomai.com/isong_static/%E7%94%B5%E5%AD%90%20%E5%99%A8%E4%B9%90.png"
            mode="widthFix"></image>
        </view>
        <view class="product-grid">
          <template v-for="(p, i) in products" :key="p.id">
            <view class="first-product-item" v-if="i === 0">
              <view class="product-info-out">
                <view class="product-info">
                  <view class="product-row">
                    <text class="product-highlight">
                      <text class="product-price">{{ p.price }}</text>
                      送视频会员一年
                    </text>
                  </view>
                  <view class="product-subdesc">试听耳机，还原真实音乐</view>
                </view>
                <view class="text-left">
                  <view class="buy-btn">立即选购</view>
                </view>
              </view>
              <view class="product-image-out">
                <image :src="p.imageUrl" class="product-image" mode="aspectFit"></image>
                <image
                  class="product-image-bottom"
                  src="https://cdn.xmxiaomai.com/isong_static/Group%205.png"
                  mode="aspectFit"></image>
              </view>
            </view>
            <view class="product-item" v-else>
              <image :src="p.imageUrl" class="product-image" mode="aspectFit"></image>
              <image
                class="product-image-bottom"
                src="https://cdn.xmxiaomai.com/isong_static/Group%205.png"
                mode="aspectFit"></image>
              <view class="text-left product-introduce">
                <view class="product-price">
                  {{ p.price }}
                </view>
                <view class="product-desc">{{ p.description }}</view>
                <view class="buy-btn">立即选购</view>
              </view>
            </view>
          </template>
        </view>
      </view> -->
    </scroll-view>

    <bottom-tab-bar :current="0" />
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
// 组件
import IsongSwiper from './components/isong-swiper/index.vue';
import MusicSwiper from './components/music-swiper/index.vue';
// 接口
import Api from '@/api';
import type { Index } from '@/api/data';
import { changeIndex0_1 } from '@/utils/util';

const data = reactive({
  userId: '',
  isLogin: false,
  bannerlist: [] as Index.Banner.Data[],
  adList: [] as Index.Ad.Data[],
  rankList: [] as Index.Rank.Data[],
  musicRecommend: [] as Index.MusicRecommend.Data[],
  memberRecommend: [] as Index.MemberRecommend.Data[],
  usingList: [] as Index.GetUsing.Data[],
  videoList: [] as Index.Video.Data[],
});
// 去登录
const toLogin = () => {
  uni.navigateTo({
    url: `/pages/sub/login/index`,
  });
};
// 邀请列表
const toInvite = () => {
  uni.navigateTo({
    url: `/pages/sub/invite/index`,
  });
};
// 热点动态
const toNews = () => {
  uni.navigateTo({
    url: `/pages/sub/news/index`,
  });
};

// 跳购买广告位
const handlePayAd = () => {
  uni.navigateTo({
    url: `/pages/sub/my/advertisement`,
  });
};

// 音乐人详情
const toMusicianDetails = (obj: Index.MemberRecommend.Data) => {
  uni.navigateTo({
    url: `/pages/sub/index/musicianDetails?id=` + obj.memberId,
  });
};

// 跳转测评
const handleEvaluation = () => {
  uni.switchTab({ url: '/pages/evaluation/index' });
};

// 跳转音乐详情
const onToMusicDetail = (obj: any) => {
  if (obj.musicId) {
    uni.navigateTo({
      url: '/pages/sub/square/musicDetail?id=' + obj.musicId,
    });
  }
};

// 跳转排行榜
const handleMoreTop = () => {
  uni.navigateTo({ url: '/pages/sub/topList/index' });
};

const handleMoreMusic = () => {
  uni.switchTab({ url: '/pages/square/index' });
};

// 跳音乐播放器
// const handleMusicPlay = (item: Index.MusicRecommend.Data) => {
//   uni.navigateTo({
//     url: `/pages/sub/square/musicPlayer?id=${item.musicId}`,
//   });
// };

/**
 * 接口相关
 */
// 获取首页视频列表
const fetchGetVideoList = async () => {
  try {
    const res = await Api.Index.videoList();
    data.videoList = res.data;
  } catch (error) {}
};

// 获取轮播图列表
const fetchGetBannerList = async () => {
  try {
    const res = await Api.Index.bannerList();
    data.bannerlist = res.data;
  } catch (error) {}
};

// 获取广告位列表
const fetchGetAdList = async () => {
  try {
    const res = await Api.Index.adList();
    data.adList = res.data;
  } catch (error) {}
};

// 获取排行榜
const fetchGetRankList = async () => {
  try {
    const res = await Api.Index.rankList();
    let rankList = changeIndex0_1(res?.data || []);
    while (rankList.length < 6) {
      rankList.push({
        coverUrl: 'https://cdn.xmxiaomai.com/isong_static/music/music-default-avatar.png',
        memberName: '',
        musicId: null,
        musicName: '虚位以待',
        sortId: null,
      });
    }
    data.rankList = rankList;
  } catch (error) {}
};

// 获取推荐音乐
const fetchGetMusicRecommend = async () => {
  try {
    const res = await Api.Index.musicRecommend();
    data.musicRecommend = res.data;
  } catch (error) {}
};

// 获取推荐人
const fetchGetMemberRecommend = async () => {
  try {
    const res = await Api.Index.memberRecommend();
    data.memberRecommend = res.data;
  } catch (error) {}
};

// 获取首页正在使用音乐测评
const fetchGetUsing = async () => {
  try {
    const res = await Api.Index.getUsing();
    data.usingList = res.data;
  } catch (error) {}
};

onLoad(options => {
  uni.setStorageSync('parentId', options.parentId && options.parentId !== 'undefined' ? options.parentId : '');
  data.userId = uni.getStorageSync('auth')?.userId;
  fetchGetBannerList();
  fetchGetAdList();
  fetchGetRankList();
  fetchGetMusicRecommend();
  fetchGetMemberRecommend();
  fetchGetUsing();
  fetchGetVideoList();
});

onShow(() => {
  data.isLogin = uni.getStorageSync('auth')?.accessToken;
});

// 分享
onShareAppMessage(() => {
  return {
    title: 'isong AI',
    imageUrl: 'https://cdn.xmxiaomai.com/isong_static/share.jpg',
    path: '/pages/index/index' + (data.userId ? ('?parentId=' + data.userId) : ''),
  };
});

onShareTimeline(() => {
  return {
    title: 'isong AI',
    imageUrl: 'https://cdn.xmxiaomai.com/isong_static/share.jpg',
    query: data.userId ? ('parentId=' + data.userId) : ''
  };
});


</script>

<style lang="scss" scoped>
.container {
  background: linear-gradient(180deg, #024f3f 0%, #024f3f 30%, #004639 90%, #c2cccb 100%);
  color: #fff;
  width: 100vw;
  height: 100vh;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
}

.scroll-view-content {
  flex: 1;
  height: 0;
  padding-bottom: 150rpx;
}

.section-wrapper {
  padding: 0 24rpx;
  margin-bottom: 30rpx;
}

.login-wrapper {
  margin-top: 65rpx;
  width: calc(100% - 48rpx);
  margin-bottom: 0;
}

.login-banner {
  background-image: url('https://cdn.xmxiaomai.com/isong_static/login_banner_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16rpx;
  padding: 0 38rpx 0 43rpx;
  height: 160rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .login-text {
    height: 160rpx;
    color: #043e30;
    font-size: 32rpx;
    line-height: 80rpx;
    font-weight: bold;
    .login-subtitle {
      font-size: 30rpx;
      line-height: 70rpx;
      opacity: 0.8;
      margin-top: 5rpx;
    }
  }

  .login-btn {
    background-color: #043e30;
    color: #ffffff;
    padding: 10rpx 24rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
    width: 161rpx;
    line-height: 54rpx;
    text-align: center;
    height: 54rpx;
  }
}

.song-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  .song-item {
    display: inline-block;
    background-image: url('https://cdn.xmxiaomai.com/isong_static/song_item.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 26rpx 20rpx;
    height: 346rpx;
    padding: 16rpx;
    position: relative;
    .song-img {
      text-align: center;
      position: absolute;
      bottom: 38rpx;
      left: calc(50% - 92rpx);
    }
    .song-cover {
      width: 184rpx;
      height: 184rpx;
      border-radius: 22rpx;
    }
    .song-title {
      font-weight: 600;
      font-size: 30rpx;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      color: #f3d5b2;
      padding-left: 20rpx;
      padding-top: 26rpx;
    }
    .song-artist {
      font-size: 28rpx;
      color: #edcba6;
      margin-top: 8rpx;
      padding-left: 20rpx;
      font-weight: 400;
    }
  }
}

.view-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  .view-item {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/song_item.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 12rpx 16rpx 8rpx;
    video {
      height: 280rpx;
      width: 100%;
      border-radius: 20rpx;
    }
  }
}

.musical-note-wrapper {
  // margin-bottom: 30rpx;
  margin-top: 30rpx;
}
.music-review {
  text-align: center;
  width: 100%;
}
.music-review-btn {
  width: 173rpx;
  height: 51rpx;
  background: linear-gradient(270deg, #ddb38b 0%, #feefbf 100%);
  border-radius: 26rpx;
  color: #015342;
  font-size: 26rpx;
  line-height: 51rpx;
  display: inline-block;
}
.musical_note {
  z-index: 999;
  display: inline-block;
  width: 100%;
  height: 395rpx;
  margin-top: -51rpx;
  position: relative;
}
.music-evaluation {
  text-align: center;
  padding: 0 14rpx;
  width: calc(100% - 28rpx);
  margin-bottom: 60rpx;
  margin-top: 40rpx;
}
.music-review-img {
  width: 100%;
  height: 245rpx;
  // margin: -146rpx 46rpx 0;
  z-index: 9;
  position: relative;
  display: inline-block;
}

.notice-swiper {
  width: 100%;
  height: 45rpx;
  overflow: hidden;
  text-align: center;
  .notice-swiper-inner {
    display: inline-block;
    width: 600rpx;
    height: 45rpx;
    line-height: 45rpx;
    background: linear-gradient(90deg, rgba(140, 58, 0, 0) 0%, #024637 48%, rgba(187, 43, 0, 0) 100%);
    border-radius: 32rpx;
    opacity: 0.52;
  }
  .notice-text {
    text-align: center;
    font-size: 26rpx;
    color: #fff6e7;
    line-height: 45rpx;
  }
}

/* 榜中榜 */
.ranking-section {
  position: relative;
  text-align: center;
  padding: 40rpx 0;
  height: 1398rpx;
  margin-top: -118rpx;
  .ranking-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .ranking-content {
    position: relative;
    z-index: 1;
    height: 1398rpx;
  }

  .podium {
    position: absolute;
    top: 672rpx;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20rpx;
    // margin-top: -50rpx;
  }
  .rank-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200rpx;
    .rank-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      border: 2px solid #eac888;
    }
    .rank-artist {
      font-size: 24rpx;
      color: #aaa;
      min-height: 21rpx;
      min-width: 39rpx;
    }
    &.rank-1 {
      height: 272.85rpx;
      width: 192rpx;
      position: absolute;
      top: 470rpx;
      left: 45rpx;
      .header-img-avatar-bg {
        width: 185rpx;
        height: 197.58rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      .header-img {
        height: 197.58rpx;
        width: 185rpx;
        // background-image: url('https://cdn.xmxiaomai.com/isong_static/Group%2021.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        z-index: 99;
        .header-img-avatar {
          width: 148rpx;
          height: 148rpx;
          border-radius: 50%;
          margin-top: 42rpx;
        }
      }
      .rank-name {
        width: 190rpx;
        height: 52rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 52rpx;
        // margin-top: -15rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    &.rank-2 {
      height: 344.87rpx;
      width: 253rpx;
      position: absolute;
      top: 330rpx;
      left: 251rpx;
      .header-img-avatar-bg {
        width: 253rpx;
        height: 267.77rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      .header-img {
        height: 267.77rpx;
        width: 253rpx;
        // background-image: url('https://cdn.xmxiaomai.com/isong_static/Group%2022.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        z-index: 99;
        .header-img-avatar {
          width: 180rpx;
          height: 180rpx;
          border-radius: 50%;
          margin-top: 69rpx;
        }
      }
      .rank-name {
        width: 220rpx;
        height: 52rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 52rpx;
        // margin-top: -15rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    &.rank-3 {
      height: 273.86rpx;
      width: 190rpx;
      position: absolute;
      top: 480rpx;
      left: 511rpx;
      .header-img-avatar-bg {
        width: 161.25rpx;
        height: 190.74rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      .header-img {
        height: 190.74rpx;
        width: 161.25rpx;
        // background-image: url('https://cdn.xmxiaomai.com/isong_static/Group%2024.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        z-index: 99;
        .header-img-avatar {
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          margin-top: 43rpx;
        }
      }
      .rank-name {
        width: 190rpx;
        height: 52rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 52rpx;
        // margin-top: -15rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    &.rank-4 {
      height: 176rpx;
      width: 163rpx;
      position: absolute;
      top: 789rpx;
      left: 57rpx;
      .header-img {
        height: 95rpx;
        width: 95rpx;
        position: relative;
        z-index: 99;
        border: 3rpx solid rgba(244, 164, 87, 1);
        border-radius: 50%;
        .header-img-avatar {
          width: 95rpx;
          height: 95rpx;
          border-radius: 50%;
        }
      }
      .rank-name {
        width: 163rpx;
        height: 46rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 46rpx;
        // margin-top: -12rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    &.rank-5 {
      height: 171rpx;
      width: 160rpx;
      position: absolute;
      top: 818rpx;
      left: 295rpx;
      .header-img {
        height: 95rpx;
        width: 95rpx;
        position: relative;
        z-index: 99;
        border: 3rpx solid rgba(244, 164, 87, 1);
        border-radius: 50%;
        .header-img-avatar {
          width: 95rpx;
          height: 95rpx;
          border-radius: 50%;
        }
      }
      .rank-name {
        width: 163rpx;
        height: 46rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 46rpx;
        // margin-top: -12rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    &.rank-6 {
      height: 171rpx;
      width: 160rpx;
      position: absolute;
      top: 848rpx;
      left: 523rpx;
      .header-img {
        height: 95rpx;
        width: 95rpx;
        position: relative;
        z-index: 99;
        border: 3rpx solid rgba(244, 164, 87, 1);
        border-radius: 50%;
        .header-img-avatar {
          width: 95rpx;
          height: 95rpx;
          border-radius: 50%;
        }
      }
      .rank-name {
        width: 163rpx;
        height: 46rpx;
        background: linear-gradient(118deg, #e6a269 0%, #ffe5cb 21%, #f29440 100%);
        box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
        border-radius: 27rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #502a07;
        line-height: 46rpx;
        // margin-top: -12rpx;
        position: relative;
        z-index: 10;
      }
      .rank-artist {
        font-weight: 500;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
  .more-btn {
    width: 239rpx;
    height: 70rpx;
    background-image: url('https://cdn.xmxiaomai.com/isong_static/%E7%BC%96%E7%BB%84%2020%20copy.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 65rpx;
    letter-spacing: 1px;
    position: absolute;
    bottom: 170rpx;
    left: calc(50% - 120rpx);
  }
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.product-introduce {
  padding-left: 27rpx;
}
.appreciation-out {
  margin-top: -180rpx;
}
/* 音乐赏析 */
.appreciation {
  height: 978rpx;
  width: 635rpx;
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
  .appreciation-header-img {
    position: relative;
    width: 520rpx;
    height: 190rpx;
    display: inline-block;
    .appreciation-img-bg {
      width: 520rpx;
      height: 190rpx;
    }
    .appreciation-img-title {
      width: 250rpx;
      height: 72rpx;
      position: absolute;
      top: 60rpx;
      left: 135rpx;
    }
  }

  .more-btn {
    width: 173rpx;
    height: 51rpx;
    background: linear-gradient(270deg, #ddb38b 0%, #feefbf 100%);
    border-radius: 26rpx;
    color: #015342;
    font-size: 26rpx;
    line-height: 51rpx;
    display: inline-block;
    margin-top: 10px;
  }

  .playlist-item {
    background-image: url('https://cdn.xmxiaomai.com/isong_static/Group%2017.png');
    background-size: 100% 100%;
    width: 595rpx;
    height: 142rpx;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 5rpx;
    z-index: 90;
    position: relative;
    .item-avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
      margin-left: 36rpx;
      margin-right: 24rpx;
    }
    .item-info {
      flex: 1;
      text-align: left;
    }
    .item-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #f5d3b1;
    }
    .item-artist {
      font-size: 24rpx;
      color: #f5d3b1;
      margin-top: 8rpx;
    }
    .quality-tag {
      width: 55rpx;
      height: 36rpx;
      display: inline-block;
      color: #ffffff;
      background-color: #00332e;
      // background-image: url('https://cdn.xmxiaomai.com/isong_static/Group%2018.png');
      // background-size: 100%;
      // background-repeat: no-repeat;
      text-align: center;
      border-radius: 22rpx;
      font-size: 20rpx;
      line-height: 36rpx;
      margin-right: 14rpx;
    }
    .item-actions {
      display: flex;
      align-items: center;
      width: 100rpx;
      .play-icon {
        width: 41rpx;
        height: 41rpx;
        background-image: url('https://cdn.xmxiaomai.com/isong_static/%E5%BD%A2%E7%8A%B6.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .more-dots {
        width: 5.4rpx;
        height: 24rpx;
        background-image: url('https://cdn.xmxiaomai.com/isong_static/%E5%BD%A2%E7%8A%B6%E7%BB%93%E5%90%88%281%29.png');
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: 24rpx;
      }
    }
  }
}

/* 音乐人 */
.musicians-section {
  // padding-left: 24rpx;
  margin-bottom: 30rpx;
  margin-top: -124rpx;
  position: relative;
  z-index: 1;
  .appreciation-header-img {
    position: relative;
    width: 100%;
    height: 479rpx;
    display: inline-block;
    .appreciation-img {
      width: 100%;
      height: 428rpx;
    }
    .appreciation-img-bg {
      width: 586rpx;
      height: 145rpx;
      position: absolute;
      top: 333rpx;
      left: 82rpx;
    }
    .appreciation-img-title {
      width: 220rpx;
      position: absolute;
      top: 380rpx;
      left: 267rpx;
    }
  }
}

/* 介绍 */
.invite-banner-out {
  background-image: url('https://cdn.xmxiaomai.com/isong_static/Bitmap%E7%9A%84%E5%89%AF%E6%9C%AC.png');
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 611rpx;
  text-align: center;
  display: flex;
  gap: 40rpx;
  justify-content: center;
  .invite-banner {
    display: inline-block;
    width: 320rpx;
    //height: 230rpx;
    border-radius: 16rpx;
    margin-top: 178rpx;
  }
  .news-banner {
    display: inline-block;
    width: 320rpx;
    //height: 230rpx;
    border-radius: 16rpx;
    margin-top: 178rpx;
  }
}

/* 电子器乐 */
.product-grid-out {
  margin-top: -50rpx;
  .appreciation-header-img {
    position: relative;
    width: 586rpx;
    height: 146rpx;
    display: inline-block;
    .appreciation-img-bg {
      width: 586rpx;
      height: 146rpx;
    }
    .appreciation-img-title {
      width: 339rpx;
      height: 90rpx;
      position: absolute;
      top: 33px;
      left: 121rpx;
    }
  }
  .product-grid {
    // display: grid;
    // grid-template-columns: repeat(2, 1fr);
    // gap: 24rpx;
    display: inline;
    padding: 0 41rpx;
    .first-product-item {
      margin-left: 20rpx;
      float: left;
      width: 667rpx;
      height: 282rpx;
      background-image: url('https://cdn.xmxiaomai.com/isong_static/%E7%9F%A9%E5%BD%A2.png');
      background-size: 100%;
      background-repeat: no-repeat;
      border-radius: 16rpx;
      padding: 20rpx;
      text-align: center;
      display: flex;
      justify-content: space-between;
      .product-image-out {
        width: 232.15rpx;
        text-align: center;
        margin-top: -70rpx;
        .product-image {
          width: 200rpx;
          height: 271rpx;
          display: inline-block;
        }
      }
      .product-info-out {
        padding: 30rpx;
      }
      .product-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #fff;
      }
      .product-row {
        display: flex;
        align-items: baseline;
      }
      .product-highlight {
        font-size: 28rpx;
        color: #fff;
      }
      .product-price {
        font-size: 55rpx;
        font-weight: 600;
        color: #f9d08b;
        margin-right: 8rpx;
        vertical-align: middle;
      }
      .product-subdesc {
        font-size: 24rpx;
        color: #ffecd5;
        margin-top: 8rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
      }
    }
    .product-item {
      margin-left: 20rpx;
      float: left;
      background-image: url('https://cdn.xmxiaomai.com/isong_static/Bitmap%281%29.png');
      background-size: 100%;
      background-repeat: no-repeat;
      width: 50%;
      border-radius: 16rpx;
      height: 499rpx;
      width: 318rpx;
      padding: 20rpx;
      text-align: center;
      .product-image {
        width: 200rpx;
        height: 200rpx;
        margin-top: -20rpx;
      }
      .product-price {
        font-size: 55rpx;
        font-weight: 600;
        color: #f9d08b;
        // margin: 10rpx 0;
      }
      .product-desc {
        font-size: 24rpx;
        color: #ffecd5;
        white-space: pre-wrap;
      }
    }
    .product-item:nth-child(2n-1) {
      margin-left: 0;
    }
    .product-image-bottom {
      width: 232.16rpx;
      height: 54.34rpx;
      display: inline-block;
      // margin-top: -20rpx;
    }
    .buy-btn {
      background: linear-gradient(180deg, #e42a48 0%, #a41a2f 100%);
      color: #fff;
      width: 191rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      margin-top: 20rpx;
      text-align: center;
      display: inline-block;
    }
  }
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background-color: #1a3a2f;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #2a4a3f;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    color: #aaa;
    &.active {
      color: #eac888;
    }
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
      background-color: #aaa;
    }
  }
  .tab-item-special {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    color: #aaa;
    position: relative;
    top: -30rpx;
    .special-icon-bg {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: #eac888;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8rpx;
      .tab-icon {
        width: 60rpx;
        height: 60rpx;
        background-color: #0a2119;
      }
    }
  }
}
</style>
